<template>
    <el-row class="login-container">
        <el-col :lg="16" :md="12" class="left">
            <div>
                <div style="text-align: left;">欢迎光临</div>
                <div>此站点是《VUE3+vite实战商城项目》的后台管理登录地址</div>
            </div>
        </el-col>
        <el-col :lg="8" :md="12" class="bg-light-50 right">
            <div>
                <h2 class="title">欢迎回来</h2>
                <div class="login-type">
                    <span class="line"></span>
                    <span>账号密码登录</span>
                    <span class="line"></span>
                </div>
                <div>
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="0" class="w-[280px]">
                        <el-form-item prop="username">
                            <el-input v-model="form.username" placeholder="请输入用户名" size="large">
                                <template #prefix>
                                    <el-icon :size="20">
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="form.password" placeholder="请输入密码" size="large" type="password"
                                show-password>
                                <template #prefix>
                                    <el-icon :size="20">
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <div class="pt-5">
                            <el-button type="primary" size="large" :loading="loading" @click="onSubmit"
                                class="min-w-full rounded-4xl">
                                登 录
                            </el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
import { toast } from "../composables/util"
import { useRouter } from 'vue-router'
import store from '~/store'

const router = useRouter()


// do not use same name with ref
const form = reactive({
    username: '',
    password: ''
})

const rules = {
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
}

// 将表单定义为响应式
const formRef = ref(null)
// 定义响应式的loading变量，用以控制登录按钮的loading显示
const loading = ref(false)

const onSubmit = () => {
    formRef.value.validate(valid => {
        if (!valid) {
            return false
        }
        loading.value = true
        store.dispatch('login', form)
        .then(res => {
            toast('登录成功')
            router.push('/')
        })
        .finally(() => {
            loading.value = false
        })
    })
}

// 监听键盘事件
function onKeyUp(e) {
    if(e.key == 'Enter') onSubmit()
}



onMounted(()=>{
    // 添加键盘监听
    document.addEventListener("keyup", onKeyUp)
})

onBeforeUnmount(()=>{
    // 移除键盘监听
    document.removeEventListener("keyup", onKeyUp)
})
</script>
<style scoped>
.login-container {
    @apply bg-indigo-500 min-h-screen min-w-screen;
}

.login-container .left,
.login-container .right {
    @apply flex items-center justify-center;
}

.left>div>div:first-child {
    @apply font-bold text-6xl text-light-50 mb-4;
}

.left>div>div:last-child {
    @apply text-cool-gray-200 text-base;
}

.right .title {
    @apply font-bold text-3xl text-gray-800;
}

.right .login-type {
    @apply flex items-center justify-center my-6 text-gray-300 space-x-2;
}

.login-type .line {
    @apply h-[1px] w-20 bg-gray-200;
}
</style>